<script setup>
import { onMounted, onUnmounted, ref, watch } from "vue";
import countTo from '@/components/count-to';
import { newWorkNumApi } from '@/apis/work'
import { newUserNumApi } from '@/apis/user'
import { newClothNumApi } from '@/apis/clothes'
import * as echarts from "echarts";
import china from "@/assets/areaJson/mapChinaPro.json";
import WeatherComponent from './weatherComponent.vue';
import { getWordCloud,getWordCloudTitle } from '@/apis/wordCloud'; // 假设你有一个获取词云数据的 API 模块
import WordCloud from "./WordCloud.vue";

// 地图绑定
const chartsRef = ref();
const tagRef = ref();
onMounted(() => {
  // getNewNum();
  initCharts();
  initTag();
});
const inFlag = ref(true)
// 初始化地图
const initCharts = () => {
  const charts = echarts.init(chartsRef.value);
  const option = {
    // 背景颜色
    // backgroundColor: "#404a59",
    geo: {
      aspectScale: 1,
      map: "china",
      label: {
        // 通常状态下的样式
        emphasis: {
          show: true,
          textStyle: {
            color: "#000",
          },
        },
        // 鼠标放上去的样式
        normal: {
          textStyle: {
            color: "#000",
          },
        },
      },
      // 地图区域的样式设置
      itemStyle: {
        normal: {
          
        },
        // 鼠标放上去高亮的样式
        emphasis: {
          areaColor: "#389BB7",
          borderWidth: 0,

          borderColor: "rgba(147, 235, 248, 1)",
          borderWidth: 1,
          areaColor: {
            type: "radial",
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              {
                offset: 0,
                color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
          shadowColor: "rgba(128, 217, 248, 1)",
          shadowOffsetX: -2,
          shadowOffsetY: 2,
          shadowBlur: 10,
        },
      },
    },
  };
  // 地图注册，第一个参数的名字必须和option.geo.map一致
  echarts.registerMap("china", china);
  charts.setOption(option);
  charts.on("click", async (e) => {
    // 冒泡存在但是不执行
    if (e.name) {
      const mapname = e.name;
      const newMapJson = await import(/* @vite-ignore */`../assets/areaJson/geometryProvince/${mapname}.json`);
      echarts.registerMap(mapname, newMapJson);
      option.geo.map = mapname;
      option.graphic = {
        // 水印类型
        type: "text",
        // 相对于容器的位置
        left: "10%",
        top: "10%",
        // 样式设置
        style: {
          // 文本内容
          text: "返回",
          // 字体粗细、大小、字体
          font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
          // 字体颜色
          fill: "#000",
        },
        onclick: () => {
          echarts.registerMap("china", china);
          option.geo.map = "china";
          charts.setOption(option);
        },
      };
      charts.setOption(option);
    } 
    
  });
};

// 暂时展示数据
let data = [
  {
    name: '服装',
    value: 180,
    itemStyle: {
      color: '#8884d8' // 灰紫色
    },
    children: [
      {
        name: '长袖',
        value: 50,
        itemStyle: {
          color: '#ff7f50' // 橘红色
        },
        children: [
          {
            name: '长袖衬衫',
            value: 20,
            itemStyle: {
              color: '#ff7f50' // 橘红色
            }
          },
          {
            name: '长袖毛衣',
            value: 15,
            itemStyle: {
              color: '#ff7f50' // 橘红色
            }
          },
          {
            name: '长袖外套',
            value: 10,
            itemStyle: {
              color: '#ff7f50' // 橘红色
            }
          },
          {
            name: '长袖连衣裙',
            value: 5,
            itemStyle: {
              color: '#ff7f50' // 橘红色
            }
          }
        ]
      },
      {
        name: '短袖',
        value: 40,
        itemStyle: {
          color: '#00bfff' // 深天蓝色
        },
        children: [
          {
            name: '短袖T恤',
            value: 20,
            itemStyle: {
              color: '#00bfff' // 深天蓝色
            }
          },
          {
            name: '短袖衬衫',
            value: 10,
            itemStyle: {
              color: '#00bfff' // 深天蓝色
            }
          },
          {
            name: '短袖背心',
            value: 10,
            itemStyle: {
              color: '#00bfff' // 深天蓝色
            }
          }
        ]
      },
      {
        name: '长裤',
        value: 30,
        itemStyle: {
          color: '#32cd32' // 酸橙绿
        },
        children: [
          {
            name: '牛仔长裤',
            value: 15,
            itemStyle: {
              color: '#32cd32' // 酸橙绿
            }
          },
          {
            name: '休闲长裤',
            value: 10,
            itemStyle: {
              color: '#32cd32' // 酸橙绿
            }
          },
          {
            name: '正装长裤',
            value: 5,
            itemStyle: {
              color: '#32cd32' // 酸橙绿
            }
          }
        ]
      },
      {
        name: '短裤',
        value: 20,
        itemStyle: {
          color: '#ff69b4' // 热粉红
        },
        children: [
          {
            name: '牛仔短裤',
            value: 10,
            itemStyle: {
              color: '#ff69b4' // 热粉红
            }
          },
          {
            name: '休闲短裤',
            value: 10,
            itemStyle: {
              color: '#ff69b4' // 热粉红
            }
          }
        ]
      },
      {
        name: '长裙',
        value: 20,
        itemStyle: {
          color: '#ba55d3' // 中紫罗兰红
        },
        children: [
          {
            name: '连衣长裙',
            value: 10,
            itemStyle: {
              color: '#ba55d3' // 中紫罗兰红
            }
          },
          {
            name: '半身长裙',
            value: 10,
            itemStyle: {
              color: '#ba55d3' // 中紫罗兰红
            }
          }
        ]
      },
      {
        name: '短裙',
        value: 20,
        itemStyle: {
          color: '#cd5c5c' // 中印度红
        },
        children: [
          {
            name: '连衣短裙',
            value: 10,
            itemStyle: {
              color: '#cd5c5c' // 中印度红
            }
          },
          {
            name: '半身短裙',
            value: 10,
            itemStyle: {
              color: '#cd5c5c' // 中印度红
            }
          }
        ]
      }
    ]
  }
];
const initTag = ()=>{
  const tag = echarts.init(tagRef.value)
  const option = {
    series: {
      type: 'sunburst',
      data: data,
      radius: [60, '90%'],
      itemStyle: {
        borderRadius: 7,
        borderWidth: 2
      },
      label: {
        show: true
      }
    }
  };
  tag.setOption(option)
}

onUnmounted(() => {
  // 清除定时器
  clearInterval(newNumInt.value)
  newNumInt.value = null
});

const mouseover = (e) => {
}

// 定时器
const newNumInt = ref()

// 翻牌器数据定义
const workStart = ref(0)
const workEnd = ref(0)

// 翻牌器数据定义
const clothStart = ref(0)
const clothEnd = ref(0)

// 翻牌器数据定义
const userStart = ref(0)
const userEnd = ref(0)

const getNewNum = async () => {
  newNumInt.value = setInterval(async() => {
      // 问数据是否有变化
      const res = await newWorkNumApi()
      workEnd.value = res.data
      const userRes = await newUserNumApi()
      userEnd.value = userRes.data
      const clothRes = await newClothNumApi()
      clothEnd.value = clothRes.data
  }, 1000);
}

watch(workEnd, (newVal, oldVal) => {
  workStart.value = oldVal
})


watch(userEnd, (newVal, oldVal) => {
  userStart.value = oldVal
})

watch(clothEnd, (newVal, oldVal) => {
  clothStart.value = oldVal
})

const getWordCloudData = () => {
  return getWordCloud();
}

const getWordClouTitleData = () => {
  return getWordCloudTitle();
}

</script>

<template>
<div class="grid-container">
    <div class="cell">
      <countTo :start-val="userStart" :end-val="857" :duration="2500" title="今日添加标签数量"></countTo>
    </div>
    <div class="cell">
      <countTo :start-val="userStart" :end-val="253" :duration="2500" title="今日新增用户数量"></countTo>
    </div>
    <div class="cell">
      <countTo :start-val="workStart" :end-val="324" :duration="2500" title="今日新增作品数量"></countTo>
    </div>
    <div class="cell">
      <countTo :start-val="clothStart" :end-val="858" :duration="2500" title="今日用户添加衣服总数"></countTo>
    </div>
    <div class="cell">
      <!-- 使用新的天气组件 -->
      <WeatherComponent style="color: #37474F; width: 100%; height: 100%;" @mouseover="mouseover"/>
    </div>
    <div class="cell">
      <WordCloud :getWordCloudData="getWordClouTitleData"/>
    </div>
    <div class="cell">
      <WordCloud :getWordCloudData="getWordCloudData"/>
    </div>
    <div class="cell">
      <!-- 标签占比 -->
        <div style="width: 550px;height: 260px;" ref="tagRef">
        </div>
    </div>
    <div class="cell cell-merge" >
      <div ref="chartsRef" style=" width: 840px; height: 530px;"></div>
    </div>
  </div>
</template>

<style scoped>

.iframe-container {
  width: 100%;
  height: 100%;
}

.grid-container {
  color: #606266;
  padding: 0.3%;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 保持4列等宽 */
  grid-template-rows: 100px repeat(2, 1fr); /* 第一行高度为200px，其余两行等高 */
  width: 100%;
  height: 100%;
  /* background-color: grey; */
}

.cell {
  box-shadow: 0 0 20px rgba(0, 123, 255, 0.7), inset 0 0 10px rgba(0, 123, 255, 0.5);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  margin: 2px;
  border-radius: 3px;
  /* box-shadow: 0 0 3px 2px #e7e9ee;  */
  display: flex;
  justify-content: center;
  align-items: center;
}

.cell:hover {
  transform: scale(1.005);
  box-shadow: 0 0 30px rgba(0, 123, 255, 1), inset 0 0 15px rgba(0, 123, 255, 0.7);
}

.cell-merge {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
}


</style>
